<div class="lifepayment-container clearfix">
  <div class="left-container fl">
    <div class="top">
      <div class="content">
        <p class="font_18">剩余电量</p>
        <div class="circle">
          <canvas id="ebalance" style="width: 100%"></canvas>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="content">
        <p class="font_18">剩余水量</p>
        <div class="circle">
          <canvas id="wbalance" style="width: 100%"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="right-container fr">
    <div class="bill-title">
      <span class="tit">生活帐单</span>
      <button class="gradient-btn" (click)="showPaymentModal()">去缴费</button>
    </div>
    <ul class="bill-list">
      <li class="list clearfix" *ngFor="let v of bills;let i=index">
        <div class="month fl">
          <p>{{v.month}}</p>
        </div>
        <div class="detail fr" >
          <ul class="water clearfix" *ngFor="let bill of v.bill;">
            <li>
              <p class="water-color">{{bill.typeName}}</p>
            </li>
            <li>
              <p>{{bill.month}}用<span *ngIf="bill.type==2">电</span><span *ngIf="bill.type==1">水</span>{{bill.degree}}<span *ngIf="bill.type==2">度</span><span *ngIf="bill.type==1">立方米</span> </p>
            </li>
            <li>
              <p class="sys-green">-{{bill.money}}</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div shark-pager *ngIf="pagination.totalPage > 1"
         [currentPage]="pagination.page"
         [totalPage]="pagination.totalPage"
         [gopage]=false
         [hl]="hl"
         [segmentSize]=5
         [startFrom]=1
         (onPageChanged)="onPageChanged($event);"
    >
    </div>

  </div>

</div>
<app-lifepayment-modal-view (modalClose)="closeModal($event)"></app-lifepayment-modal-view>
